<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>背景缩放 background-size</title>
        <style>
            div {
                width: 500px;
                height: 500px;
                border: 2px solid red;
                background: url(../css-sample/images/dog.jpg) no-repeat;
                /* 1. background-size: 图片的宽度 图片的高度; */
                /* background-size: 500px 200px; */

                /* 2. 只写一个参数 肯定是宽度，高度省略了，会等比例缩放 */
                /* background-size: 500px; */

                /* 3. 里面的单位可以跟%  相对于父盒子来定 */
                /* background-size: 50%; */

                /* 4. cover 等比例拉伸，要高与宽都完全覆盖div盒子后不再拉伸，所以可能有部分背景图片显示不全 */
                /* background-size: cover; */

                /* 5. contain 高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了，所有可能有部分空白区域 */
                background-size: contain;
            }
        </style>
    </head>

    <body>
        <div></div>
        <p></p>
    </body>
</html>
